<template>
	<view class="pt20 main">
		<view class="server-box">
			<u-swiper
				height="384rpx"
				keyName="url"
				:list="banner"
				indicator
				circular
				:radius="0"
				:current="currentSwiper"
				@change="changeSwiper"
			>
				<template #indicator>
					<text class="indicator-num">{{ currentSwiper + 1 }}/{{ banner.length }}</text>
				</template>
			</u-swiper>
			<view class="pd22 server-info">
				<view class="flex-between mb14">
					<text class="price">¥100.00</text>
					<text class="pv">1000+浏览</text>
				</view>
				<view class="flex mb20">
					<view class="server-item">保证原创</view>
					<view class="server-item">保证提供源码</view>
					<view class="server-item">可开票</view>
					<view class="server-item">包售后</view>
				</view>
				<view class="server-desc">小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</view>
			</view>
		</view>
		<view class="server-box menu-box">
			<u-grid :border="false" :col="4" @click="clickMenu">
				<u-grid-item v-for="(item, index) in menuList" :key="index">
					<image style="width: 80rpx; height: 80rpx" :src="item.url" />
					<text class="mt20 grid-text">{{ item.name }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="server-detail mt30 pb20 pl20 pr20">
			<view class="pt30 pb30 text-c">详情介绍</view>
			<u-parse :content="content"></u-parse>
		</view>
		<view class="server-bottom flex-between">
			<view class="relation">
				<image style="width: 44rpx; height: 44rpx" src="@/static/images/wx-icon.jpg" />
				<view class="mt5 text">微信</view>
			</view>
			<view class="relation" @click="openCustomerServiceChat">
				<image style="width: 44rpx; height: 44rpx" src="@/static/images/service-icon.jpg" />
				<view class="mt5 text">客服</view>
			</view>

			<button class="server-btn">立即咨询</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { openCustomerServiceChat } from '@/utils/utils';

const currentSwiper = ref(0);
const banner = [
	{
		url: '../../../../static/images/banner1.jpg',
	},
	{
		url: '../../../../static/images/banner2.jpg',
	},
	{
		url: '../../../../static/images/banner3.jpg',
	},
];
const changeSwiper = (val: { current: number }): void => {
	currentSwiper.value = val.current;
};

const menuList = [
	{
		url: '../../static/images/server1.jpg',
		name: '保证原创',
	},
	{
		url: '../../static/images/server2.jpg',
		name: '源码交付',
	},
	{
		url: '../../static/images/server3.jpg',
		name: '行业定制',
	},
	{
		url: '../../static/images/server4.jpg',
		name: '售后保障',
	},
];
const clickMenu = () => {};

const content = `<p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p><p>小程序开发软件分销商城预约系统物联网餐饮 源码特版复制定制</p>`;
</script>
<style lang="scss" scoped>
.main {
	height: 100%;
	overflow: auto;
	background: linear-gradient(180deg, #008cff 0%, #f5fafe 40%) #f5fafe;
}
:deep(.u-swiper__indicator) {
	right: 24rpx;
	bottom: 16rpx;
}
.indicator-num {
	color: #f8f8f8;
	font-size: 22rpx;
}
.server-box {
	border-radius: 20rpx;
	margin: 0 30rpx;
	overflow: hidden;
	background: #ffffff;

	.server-info {
		background: #ffffff;
		.price {
			font-size: 24rpx;
			color: #ff0606;
		}
		.pv {
			font-size: 24rpx;
			color: #e56f01;
		}
		.server-item:not(:last-child) {
			margin-right: 10rpx;
		}
		.server-item {
			padding: 1px 10rpx;
			background: #eff1ff;
			border-radius: 8rpx;
			border: 1rpx solid #0081ff;
			font-size: 20rpx;
			color: #0081ff;
		}
		.server-desc {
			width: 100%;
			font-size: 32rpx;
			color: #333333;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.menu-box {
	margin-top: 20rpx;
	padding: 20rpx 56rpx;
	.grid-text {
		font-size: 24rpx;
		color: #333333;
	}
}
.server-detail {
	background: #ffffff;
	border-radius: 40rpx;
	margin-bottom: 120rpx;
}
.server-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	padding: 10rpx 30rpx 31rpx 60rpx;
	background: #ffffff;
	border: 1rpx solid #e7e7e7;
	.relation {
		width: 44rpx;
		text-align: center;
	}
	.relation:first-of-type {
		margin-right: 80rpx;
	}
	.text {
		font-size: 22rpx;
		color: #666660;
	}
	.server-btn {
		width: 412rpx;
		height: 72rpx;
		background: #ff0606;
		border-radius: 36rpx;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 72rpx;
		margin-right: 0;
	}
}
</style>
